<template>
    <div class="nav-line">
        <div class="nav-line-top" :style="topLineStyle"></div>
        <div class="nav-line-left" :style="leftLineStyle"></div>
        <div class="nav-line-account" :style="accountStyle">
            {{ attr.x }}, {{ attr.y }}
        </div>
        <div class="nav-line-com" :style="comStyle">
            <span>{{ attr.w }}, {{ attr.h }}</span>
        </div>
    </div>
</template>

<script setup>
    import {computed, defineProps} from 'vue'

    const props = defineProps({
        attr: {
            type: Object,
            required: true,
        },
        scale: {
            type: Number,
            required: true,
        },
    })
    const topLineStyle = computed(() => ({
        height: `${props.attr.y + 60 / props.scale}px`,
        borderLeftWidth: `${0.9 / props.scale}px`,
    }))

    const leftLineStyle = computed(() => ({
        width: `${props.attr.x + 60 / props.scale}px`,
        borderTopWidth: `${0.9 / props.scale}px`,
    }))

    const accountStyle = computed(() => ({
        fontSize: `${(12 / props.scale)}px`,
        top: `-${(6 / props.scale)}px`,
        left: `-${(6 / props.scale)}px`,
    }))

    const comStyle = computed(() => ({
        fontSize: `${(12 / props.scale)}px`,
        top: `${props.attr.h + 20}px`
    }))
</script>
